// import React from 'react';
// import ReactDOM from 'react-dom';
// import App from './components/colorComment/app.jsx';

// ReactDOM.render( <App  /> , document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';


const DataCompoent = (ComposedComponet,url) =>{
    return class DataCompoent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                data:[],
                loading:false,
                loaded:false
            }
        }
        componentWillMount(){
            this.setState({loading:true});
            fetch(url)
                .then(Response => Response.json())
                .then(data => this.setState({
                    loaded: true,
                    loading: false,
                    data
                }))
        }
        render(){
            return (
                <div className="data-component">
                    {(this.state.loading) ? <div>loading...</div> : <ComposedComponet {...this.state} {...this.props}/>}
                </div>
            )
        }
    }
};

const PeopleList = ({data}) => {
    return <ol>
       { data.results.map((person,i) => {
           const {first,last} = person.name;
           return <li key={i}>
               {first}{last}
           </li>
       })}
    </ol>
};
const RandomMeUsers = DataCompoent(PeopleList,"https://randomuser.me/api/");
const listDiv = document.createElement('div');
listDiv.id="list";
document.body.appendChild(listDiv);
ReactDOM.render( <RandomMeUsers count={10}  /> , document.getElementById('list'));

const CountryNames = ({data,selected=""}) => {
    return <select className="peolpe-list" defaultValue={selected}>
    {data.map(({name},i) => <option key={i} value={name}>{name}</option>)}
</select>
};

const Expandabel = ComposedComponet => class Expandabel extends React.Component {
    constructor(props){
        super(props);
        const collasped = (props.hidden && props.hidden === true) ? true : false;
        this.state = {collasped};
        this.expandCollapse = this.expandCollapse.bind(this)
    }
    expandCollapse() {
        let collasped = !this.state.collasped;
        this.setState({collasped});
    }
    render(){
        return <ComposedComponet expandCollapse = {this.expandCollapse}  {...this.state} {...this.props} />
    }
};


class MenuButton extends  React.Component {
    componentWillReceiveProps(nextProps){
        const collasped = (nextProps.collasped && nextProps.collasped === true) ? true : false;
        this.setState({collasped});
    }
    render(){
        const {children,collasped,txt,expandCollapse} = this.props;
        return (
            <div className="pop-button">
                <button onClick={expandCollapse}>{txt}</button>
                {(!collasped) ? <div className="pop-up">{children}</div>:""}
            </div>
        )
    }
}

const ShowHideMessage = ({children,collasped,expandCollapse}) => <p onClick={expandCollapse}>{collasped}
    {(collasped) ? children.replace(/[a-zA-Z0-9]/g,"x") : children}
</p>;
const HiddenMessage = Expandabel(ShowHideMessage);
const HiddenDiv = document.createElement('div');
HiddenDiv.id="HiddenD";
document.body.appendChild(PopUpDiv);
ReactDOM.render(
    <HiddenMessage hidden={true}>This is a hidden message</HiddenMessage>,
    document.getElementById('react-container')
)
const PopUpButton = Expandabel(MenuButton);

const PopUpDiv = document.createElement('div');
PopUpDiv.id="PopUp";
document.body.appendChild(PopUpDiv);
ReactDOM.render( <PopUpButton hidden={true} txt="toggle popup">
    <h1>Hidden Content</h1>
    <p>This content will start off</p>
</PopUpButton> , document.getElementById('PopUp'));


const CountryDropDown = DataCompoent(CountryNames,"https://restcountries.eu/rest/v1/all");
ReactDOM.render( <CountryDropDown selected={"United States"}  /> , document.getElementById('root'));
